<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left">
        <view class="menu-icon" @tap="onMenuClick">
          <text class="menu-text">☰</text>
        </view>
      </view>
      <view class="nav-center">
        <!-- 搜索框 -->
        <view class="search-container" @tap="onSearchFocus">
          <image src="/static/search-line.png" class="search-icon" mode="aspectFit" />
          <text class="search-placeholder-text">搜索歌曲、歌手...</text>
          <view class="search-actions">
			<!--
            <text class="action-icon">!</text>
            <text class="action-icon">⧉</text>
            <text class="action-icon">🎤</text>
			-->
          </view>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 推荐卡片区域 -->
      <view class="recommendation-cards">
        <scroll-view class="cards-scroll" scroll-x="true" show-scrollbar="false">
          <view class="cards-container">
            <!-- 每日推荐 -->
            <view class="recommend-card daily-recommend">
              <image src="/static/每日推荐.jpeg" class="card-bg" mode="aspectFill" />
              <view class="card-overlay">
                <view class="play-button">▶</view>
              </view>
              <view class="daily-recommend-title">
                <text class="card-title">每日推荐</text>
              </view>
              <view class="daily-recommend-subtitle">
                <text class="card-subtitle">今日限定好歌推荐</text>
              </view>
            </view>
            
            <!-- 私人雷达 -->
            <view class="recommend-card private-radar">
              <image src="/static/私人雷达.jpeg" class="card-bg" mode="aspectFill" />
              <view class="card-overlay">
                <view class="play-button">▶</view>
              </view>
              <view class="private-radar-title">
                <text class="card-title">私人雷达</text>
              </view>
              <view class="private-radar-subtitle">
                <text class="card-subtitle">你爱的歌值得反复听</text>
              </view>
            </view>
            
            <!-- 新歌首发 -->
            <view class="recommend-card new-song">
              <image src="/static/新歌首发.jpeg" class="card-bg" mode="aspectFill" />
              <view class="card-overlay">
                <view class="play-button">▶</view>
              </view>
              <view class="new-song-title">
                <text class="card-title">新歌首发</text>
              </view>
              <view class="new-song-subtitle">
                <text class="card-subtitle">来听听新的音乐</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 雷达歌单 -->
      <view class="section">
        <text class="section-title">雨栀沐恬的雷达歌单</text>
        <scroll-view class="playlist-scroll" scroll-x="true" show-scrollbar="false">
          <view class="playlist-container">
            <view v-for="(playlist, index) in radarPlaylists" :key="index" class="playlist-card" @tap="playPlaylist(playlist)">
              <image :src="playlist.cover" class="playlist-cover" mode="aspectFill" />
              <view class="playlist-overlay">
                <view class="playlist-stats">
                  <text class="stats-icon">🎧</text>
                  <text class="stats-count">{{ playlist.playCount }}</text>
                </view>
                <view class="play-button">▶</view>
              </view>
              <view class="playlist-info">
                <view class="playlist-title">{{ playlist.name }}</view>
                <text class="playlist-desc">{{ playlist.description }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 个性化推荐 -->
      <view class="section">
        <text class="section-title">根据「孤独」为你推荐</text>
        <view class="song-list">
          <view v-for="(song, index) in personalizedSongs" :key="song.id" class="song-item" @tap="playSong(song)">
            <image :src="song.cover" class="song-cover" mode="aspectFill" />
            <view class="song-info">
              <text class="song-name">{{ song.name }}</text>
              <view class="song-meta">
                <text class="play-count" v-if="song.playCount">超{{ song.playCount }}%人播放</text>
                <text class="song-artist">{{ song.artist }}</text>
              </view>
            </view>
            <view class="song-actions">
              <image src="/static/play-large-line.png" class="play-icon" mode="aspectFit" />
              <text class="list-icon" v-if="index === 1"></text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 音乐播放器组件 -->
    <musicPlayer ref="musicPlayer" />
    
    <!-- 临时调试按钮 -->
    <view class="debug-panel" v-if="isLogin">
      <button @tap="testFavorite" class="debug-btn">测试收藏功能</button>
      <button @tap="checkLoginStatus" class="debug-btn">检查登录状态</button>
      <button @tap="refreshUserStatus" class="debug-btn">刷新用户状态</button>
    </view>
  </view>
</template>

<script>
import musicPlayer from '@/components/musicPlayer.vue'
import userManager from '@/utils/user.js'

export default {
  components: {
    musicPlayer
  },
  data() {
    return {
      userInfo: null,
      isLogin: false,
      radarPlaylists: [
        {
          id: 1,
          name: '宝藏雷达',
          cover: '/static/宝藏雷达.jpg',
          playCount: '229.5亿',
          description: '今天《春天如约而至》爱不释耳'
        },
        {
          id: 2,
          name: '会员雷达',
          cover: '/static/会员雷达.jpg',
          playCount: '5.3亿',
          description: '黑胶专属从《Peter Pan Was Right》开...'
        },
        {
          id: 3,
          name: '怀旧精选',
          cover: '/static/怀旧精选.jpg',
          playCount: '1.3亿',
          description: '从《我知道》重温经典'
        }
      ],
      personalizedSongs: [
        {
          id: 1,
          name: '失恋无罪',
          artist: '黄丽玲',
          cover: 'https://ai-public.mastergo.com/ai/img_res/461b700ad210f7974480427a4edb2f98.jpg',
          playCount: 77,
          url: 'https://music.163.com/song/media/outer/url?id=519909355.mp3',
          duration: 240
        },
        {
          id: 2,
          name: '信 (Time Machine) - 银河快递',
          artist: '银河快递',
          cover: 'https://ai-public.mastergo.com/ai/img_res/f9fc38e361ab67a35c0e5506eddd71df.jpg',
          url: 'https://music.163.com/song/media/outer/url?id=139774.mp3',
          duration: 180
        },
        {
          id: 3,
          name: '唯一',
          artist: '邓紫棋',
          cover: '/static/唯一.jpg',
          url: 'https://music.163.com/song/media/outer/url?id=409916250.mp3',
          duration: 195
        }
      ]
    }
  },
  onLoad() {
    this.checkLoginStatus()
  },
  
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      this.isLogin = userManager.checkLogin()
      this.userInfo = userManager.getUserInfo()
    },
    
    // 显示搜索
    showSearch() {
      this.showSearchPanel = true
    },
    
    // 隐藏搜索
    hideSearch() {
      this.showSearchPanel = false
    },
    
    // 搜索框获得焦点
    onSearchFocus() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
    
    // 菜单点击
    onMenuClick() {
      uni.showActionSheet({
        itemList: ['设置', '帮助', '关于'],
        success: (res) => {
          console.log('菜单选择:', res.tapIndex)
        }
      })
    },
    
    // 播放歌单
    playPlaylist(playlist) {
      console.log('播放歌单:', playlist.name)
      uni.showToast({
        title: `播放${playlist.name}`,
        icon: 'none'
      })
    },
    

    
    // 播放歌曲
    playSong(song) {
      this.$refs.musicPlayer.playSong(song)
      this.hideSearchResults()
    },
    
    // 跳转到登录页面
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    
    // 用户头像点击
    onUserAvatarClick() {
      if (this.isLogin) {
        this.showUserMenu()
      } else {
        this.goToLogin()
      }
    },
    
    // 显示用户菜单
    showUserMenu() {
      uni.showActionSheet({
        itemList: ['个人中心', '退出登录'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.showUserProfile()
          } else if (res.tapIndex === 1) {
            this.handleLogout()
          }
        }
      })
    },
    
    // 显示用户资料
    showUserProfile() {
      uni.showModal({
        title: '个人资料',
        content: `昵称: ${this.userInfo.nickname}\n登录方式: ${this.userInfo.loginType}`,
        showCancel: false
      })
    },
    
    // 处理退出登录
    async handleLogout() {
      try {
        await userManager.logout()
        this.isLogin = false
        this.userInfo = null
        uni.showToast({
          title: '已退出登录',
          icon: 'success'
        })
      } catch (error) {
        uni.showToast({
          title: '退出失败',
          icon: 'none'
        })
      }
    },
    
    // 测试收藏功能
    testFavorite() {
      console.log('=== 手动测试收藏功能 ===')
      if (this.$refs.musicPlayer) {
        this.$refs.musicPlayer.toggleFavorite()
      } else {
        console.error('音乐播放器组件未找到')
      }
    },
    
    // 检查登录状态
    checkLoginStatus() {
      console.log('=== 手动检查登录状态 ===')
      console.log('用户管理器状态:', {
        checkLogin: userManager.checkLogin(),
        getUserInfo: userManager.getUserInfo(),
        getUserId: userManager.getUserId()
      })
      
      console.log('存储状态:', {
        isLogin: uni.getStorageSync('isLogin'),
        userInfo: uni.getStorageSync('userInfo'),
        token: uni.getStorageSync('token')
      })
      
      uni.showModal({
        title: '登录状态',
        content: `登录状态: ${userManager.checkLogin()}\n用户ID: ${userManager.getUserId()}\n用户名: ${userManager.getUserInfo()?.nickname || '无'}`,
        showCancel: false
      })
    },
    
    // 刷新用户状态
    refreshUserStatus() {
      console.log('=== 强制刷新用户状态 ===')
      const newStatus = userManager.refreshUserStatus()
      console.log('刷新后的登录状态:', newStatus)
      
      // 更新页面状态
      this.checkLoginStatus()
      
      uni.showToast({
        title: newStatus ? '状态刷新成功' : '状态刷新失败',
        icon: newStatus ? 'success' : 'none'
      })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: linear-gradient(135deg, #6b8e6b 0%, #4a6b4a 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  z-index: 999;
  padding-top: calc(env(safe-area-inset-top, 40rpx) + 40rpx);
  box-shadow: 0 4rpx 20rpx rgba(74, 107, 74, 0.3);
}

.nav-left {
  display: flex;
  align-items: center;
}

.menu-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
}

.menu-text {
  font-size: 36rpx;
  color: #ffffff;
}


.nav-center {
  flex: 1;
  margin: 0 32rpx;
}

.search-container {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50rpx;
  padding: 16rpx 24rpx;
  position: relative;
  backdrop-filter: blur(10px);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.search-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 16rpx;
  filter: brightness(0.8);
}

.search-placeholder-text {
  flex: 1;
  font-size: 28rpx;
  color: #4a6b4a;
}

.search-actions {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.action-icon {
  font-size: 24rpx;
  color: #666;
}




.main-content {
  padding-top: 180rpx;
  padding-bottom: 200rpx;
}

.recommendation-cards {
  padding: 32rpx 0;
}

.cards-scroll {
  white-space: nowrap;
}

.cards-container {
  display: flex;
  gap: 24rpx;
  padding: 0 32rpx;
}

.recommend-card {
  width: 280rpx;
  height: 200rpx;
  border-radius: 16rpx;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.daily-recommend,
.private-radar,
.new-song {
  position: relative;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.card-icon {
  font-size: 32rpx;
}

.card-number {
  font-size: 48rpx;
  font-weight: bold;
  color: white;
}

.card-title {
  font-size: 28rpx;
  font-weight: 500;
  color: white;
  margin-bottom: 8rpx;
}

.card-subtitle {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.card-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24rpx;
}

.card-info {
  position: absolute;
  bottom: 16rpx;
  left: 16rpx;
  right: 16rpx;
}

.private-radar-title {
  position: absolute;
  top: 24rpx;
  left: 24rpx;
}

.private-radar-subtitle {
  position: absolute;
  bottom: 24rpx;
  left: 24rpx;
}

.daily-recommend-title {
  position: absolute;
  top: 24rpx;
  left: 24rpx;
}

.daily-recommend-subtitle {
  position: absolute;
  bottom: 24rpx;
  left: 24rpx;
}

.new-song-title {
  position: absolute;
  top: 24rpx;
  left: 24rpx;
}

.new-song-subtitle {
  position: absolute;
  bottom: 24rpx;
  left: 24rpx;
}


.section {
  margin-top: 48rpx;
  padding: 0 32rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 32rpx;
  display: block;
}

.playlist-scroll {
  white-space: nowrap;
}

.playlist-container {
  display: flex;
  gap: 24rpx;
  align-items: flex-start;
}

.playlist-card {
  width: 240rpx;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  border-radius: 12rpx;
}

.playlist-cover {
  width: 100%;
  height: 240rpx;
  border-radius: 12rpx;
}

.playlist-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16rpx;
}

.play-button {
  position: absolute;
  bottom: 16rpx;
  right: 16rpx;
  width: 48rpx;
  height: 48rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  color: #333;
  z-index: 3;
}

.playlist-stats {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.stats-icon {
  font-size: 20rpx;
  color: white;
}

.stats-count {
  font-size: 20rpx;
  color: white;
}


.playlist-info {
  position: absolute;
  bottom: 16rpx;
  left: 16rpx;
  right: 16rpx;
  z-index: 2;
}

.playlist-title {
  font-size: 28rpx;
  color: white;
  font-weight: bold;
  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  margin-bottom: 4rpx;
  word-break: keep-all;
  text-align: left;
}

.playlist-desc {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.3;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

.song-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.song-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1px solid #f0f0f0;
  min-height: 120rpx;
}

.song-item:last-child {
  border-bottom: none;
}

.song-cover {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-right: 24rpx;
}

.song-info {
  flex: 1;
  min-width: 0;
}

.song-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8rpx;
}

.song-meta {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.play-count {
  font-size: 22rpx;
  color: #ff4444;
  background: rgba(255, 68, 68, 0.1);
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
}

.song-artist {
  font-size: 24rpx;
  color: #666;
}

.song-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  min-width: 60rpx;
  height: 60rpx;
}

.play-icon {
  width: 40rpx;
  height: 40rpx;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.list-icon {
  font-size: 24rpx;
  color: #666;
}

/* 调试面板样式 */
.debug-panel {
  position: fixed;
  top: 200rpx;
  right: 20rpx;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.debug-btn {
  background: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
  font-size: 24rpx;
  min-width: 200rpx;
}

</style>

